<template>
  <!-- 分类内容组件 -->
  <div class="category-bottom" ref="categoryWrap">
    <div class="category-left" ref="sidewrapper">
      <ul>
        <!-- @touchend -->
        <!-- 声明一个变量active用index传值，点击对应的li达到对应的 active为true -->
        <li
          v-for="(item, index) in list[2]"
          :key="index"
          @touchend="flag(index)"
          :class="{ 'active': active === index }"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div class="category-right" ref="contentwrapper">
      <div>
        <div class="big-img">
        <img :src="list[0].mainImgUrl" alt="" v-show="list[0].mainImgUrl"/>
        </div>
        <!-- 双层v-for遍历里面的数据 -->
        <ul v-for="(item, inx) in list[1]" :key="inx">
          <div class="first">{{ item.title }}</div>
          <li v-for="(i, inx) in item.productList" :key="inx">
            <img :src="i.imgUrl" alt="" /><br />
            <span>{{ i.title }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
// 实现分页滚动
import BScroll from '@better-scroll/core'
export default {
  props: ["list"],
  data() {
    return {
      active: 0,
      mainImgUrl: "",
    };
  },
  methods: {
    flag(index) {
      this.active = index;
      this.$emit("switched", index);
    },
    // 固定父容器高度
    setSearchWrapHeight() {
      let $screenHeight = document.documentElement.clientHeight;
      this.$refs.categoryWrap.style.height = $screenHeight - 70 + "px";
    },
  },
  mounted() {
    // dom完全更新之后执行
    // this.$nextTick(() => {
      setTimeout(()=>{
        this.setSearchWrapHeight();
        new BScroll(this.$refs.sidewrapper);
        new BScroll(this.$refs.contentwrapper)
      },100)
    // });
  },
};
</script>

<style lang="scss" scoped>
.category-bottom {
  display: flex;
  width: 100%;
}
.category-left {
  width: 225px;
  margin-bottom: 50px;
  // overflow: hidden;
}
.category-left li {
  background-color: rgb(246, 246, 246);
  width: 225px;
  height: 92px;
  font-size: 28px;
  line-height: 92px;
  text-align: center;
}
.category-left li.active {
  color: #f63515;
  background-color: white;
}
.category-right {
  width: 525px;
  padding: 0 20px;
  margin-bottom: 50px;
  height: auto;
  box-sizing: border-box;
  // overflow: hidden;
}
.big-img img {
  width: 485px;
  height: 165px;
}
.category-right ul {
  display: flex;
  flex-wrap: wrap;
}
.category-right li {
  flex: 33%;
  font-size: 30px;
  text-align: center;
}
.category-right ul li img{
  width: 160px;
  height: 160px;
}
.first {
  width: 485px;
  padding: 40px 0;
  font-size: 34px;
}
</style>